"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _utils = require("../utils");

var _constant = require("../utils/constant");

var _relation = require("../mixins/relation");

var _icon = _interopRequireDefault(require("../icon"));

var _createNamespace = (0, _utils.createNamespace)('step'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1];

var _default = createComponent({
    mixins: [(0, _relation.ChildrenMixin)('vanSteps')],
    computed: {
        status: function status() {
            if (this.index < this.parent.active) {
                return 'finish';
            }

            if (this.index === this.parent.active) {
                return 'process';
            }
        }
    },
    methods: {
        genCircle: function genCircle() {
            var h = this.$createElement;
            var _this$parent = this.parent,
                activeIcon = _this$parent.activeIcon,
                activeColor = _this$parent.activeColor,
                inactiveIcon = _this$parent.inactiveIcon;

            if (this.status === 'process') {
                return this.slots('active-icon') || h(_icon.default, {
                    "class": bem('icon'),
                    "attrs": {
                        "name": activeIcon,
                        "color": activeColor
                    }
                });
            }

            var inactiveIconSlot = this.slots('inactive-icon');

            if (inactiveIcon || inactiveIconSlot) {
                return inactiveIconSlot || h(_icon.default, {
                    "class": bem('icon'),
                    "attrs": {
                        "name": inactiveIcon
                    }
                });
            }

            return h("i", {
                "class": bem('circle')
            });
        }
    },
    render: function render() {
        var _ref;

        var h = arguments[0];
        var status = this.status;
        var _this$parent2 = this.parent,
            activeColor = _this$parent2.activeColor,
            direction = _this$parent2.direction;
        var titleStyle = status === 'process' && {
            color: activeColor
        };
        return h("div", {
            "class": [_constant.BORDER, bem([direction, (_ref = {}, _ref[status] = status, _ref)])]
        }, [h("div", {
            "class": bem('title'),
            "style": titleStyle
        }, [this.slots()]), h("div", {
            "class": bem('circle-container')
        }, [this.genCircle()]), h("div", {
            "class": bem('line')
        })]);
    }
});

exports.default = _default;